<template>
  <div class="flex-1 h-full">
    <div class="echarts" style="height: calc(100%)">
      <!-- <div
        class="text-[16px] h-[10%] lh-[10%] font-700 flex justify-center items-center"
      >
        <span class="pt-[0px]">生产重量0吨</span>
      </div> -->
      <div class="flex" style="height: calc(50%)">
        <div class="flex-1">
          <ECharts
            v-if="option1"
            :option="option1"
            :id="`energy-statistics-last-month` + props.id"
            ref="chart1"
            style="height: calc(100%)"
          />
        </div>
      </div>
      <div
        class="flex"
        style="
          height: calc(50%);
          border-top: 1px dashed rgb(100, 149, 237, 0.4);
        "
      >
        <div class="flex-1">
          <ECharts
            v-if="option"
            :option="option"
            :id="`energy-statistics-last-month1` + props.id"
            ref="chart1"
            style="height: calc(100%)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import dayjs from "dayjs";
import request from "@/utils/request";
import { useDictionary } from "@/utils/useTable";
import {
  qmsWeightProductList,
  qmsWeightProductOtherList,
} from "@/assets/js/qms";
import * as echarts from "echarts";
import { useRoute } from "vue-router";
// import { isDarkMode } from "@/utils/index";
const routeName = useRoute().name;

function isDarkMode(params: type) {
  return true;
}

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
  second: {
    type: Number,
    default: () => {
      return 1000 * 60 * 10;
    },
  },
});
const { panelSetIcon, id, url, title, second } = toRefs(props);

const rich: any = {
  name: {
    color: "#666",
    fontSize: 13,
    // padding: [8, 30, 0, 30],
    fontWeight: "600",
    align: "left",
  },
  value: {
    color: "#333",
    fontSize: 14,
    padding: [0, 30, 8, 30],
    fontWeight: "500",
    align: "left",
  },
  percent: {
    color: "#FFF",
    align: "right",
    fontSize: 14,
    fontWeight: "400",
    //padding: [0, 5]
  },
};
//职称结构图表
const colorList = [
  "#006DFB",
  "#18dcff",
  "#313ca9",
  "#B4EC51",
  "#7d5fff",
  "#FFBC6D",
  "#51D9A2",
  "#f9e264",
  "#f47a75",
  "grey",
  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    {
      offset: 0,
      color: "#04B9BD",
    },
    {
      offset: 1,
      color: "#76F2F8",
    },
  ]),
  "#765025",
];
const colorList1 = [
  "#bf19ff",
  "#854cff",
  "#5f45ff",
  "#02cdff",
  "#314976",
  "#f9e264",
  "#f47a75",
  "#009db2",
  "#024b51- 0780cf",
  "#765005",
];

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const list = [
  {
    name: "空压机箱体",
    value: 8960,
  },
  {
    name: "PAN22左卡钳",
    value: 6292,
  },
  {
    name: "PAN17卡钳",
    value: 3672,
  },
  {
    name: "空压机箱体",
    value: 3010,
  },
  {
    name: "轮毂",
    value: 2400,
  },
];

const reportData = ref();
const reportDataOther = ref();

const title_l = ref("绿电能耗");
const title_r = ref("其他能耗");

const searchParam = reactive({
  reportDate: dayjs().format("YYYY-MM-DD"),
});

async function handleSearch() {
  reportData.value = null;
  loading.value = true;
  const { data } = await request({
    url: `/mes/meselectricstatisticalrecord/getGreenElectric`,
    method: "get",
    params: {},
  }).finally(() => {
    loading.value = false;
  });
  reportData.value = [
    {
      name: title_l.value,
      value: data?.greenElectric || 0,
    },
    {
      name: title_r.value,
      value: data?.otherElectric || 0,
    },
  ];
  setOptions();

  // setTimeout(() => {
  //   loading.value = false;
  //   reportData.value = list;
  //   setOptions();
  // }, 500);
}
async function handleSearch1() {
  reportDataOther.value = null;
  loading.value = true;
  const { data } = await request({
    url: `/mes/meselectricstatisticalrecord/getLastMontyElectric`,
    method: "post",
    data: {
      reportDate: searchParam.reportDate,
    },
  }).finally(() => {
    loading.value = false;
  });
  let result = [];
  result = data?.map((e: any) => ({
    name: e.electricStatisticalTypeName,
    value: e.electricQuantity,
  }));
  reportDataOther.value = result;
  setOptions1();
  // setTimeout(() => {
  //   loading.value = false;
  //   reportDataOther.value = list;
  //   setOptions1();
  // }, 500);
}

const option = ref();
const xAxis = ref<string[]>([]);
const yAxis = ref<number[]>([]);
const xAxisOther = ref<string[]>([]);
const yAxisOther = ref<number[]>([]);
const titleSize = isDarkMode(routeName) ? 16 : 14;
const chart = ref();
function setOptions() {
  const rawData = reportData.value;
  // 对数据进行降序排序
  rawData.sort((a, b) => b.value - a.value);

  rawData?.map((e: any, index) => {
    xAxis.value = [...xAxis.value, e.name];
    yAxis.value = [...yAxis.value, e.value];
  });

  option.value = {
    color: colorList,
    darkMode: true,
    layout: "none",
    animation: true, //控制动画示否开启
    animationDuration: 3000,
    animationEasing: "bounceOut", //缓动动画
    animationThreshold: 8, //动画元素的阈值
    backgroundColor: "transparent", // 给echarts图设置背景色
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,.5)",
      textStyle: {
        color: "#fff",
        fontFamily: "DINLight",
        fontSize: 14,
      },
    },
    grid: {
      left: "0%", //图表距边框的距离
      right: "0%",
      top: "8%",
      bottom: "4%",
      containLabel: true,
    },
    title: [
      {
        show: true,
        text: title_l.value,
        left: "center",
        top: "7%",
        // textAlign: "center",
        textStyle: {
          fontSize: titleSize,
          color: isDarkMode(routeName) ? "rgb(255,255,255)" : "#333",
        },
      },
    ],
    series: [
      {
        itemStyle: {
          color: function (params) {
            return colorList[params?.dataIndex];
          },
        },
        type: "pie",
        radius: ["0%", "56%"],
        center: ["50%", "56%"],
        label: {
          show: true,
          //   position: "inside",
          //   formatter: "{name|{b}}，{d}%",
          formatter: "{b}\n{d}%",
          color: isDarkMode(routeName) ? "#eeeeee" : "#666",
          fontSize: 13,
          lineHeight: 20,
          rich: rich,
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 10,
          lineStyle: {
            width: 1,
          },
        },
        data: reportData.value,
      },
      {
        itemStyle: {
          color: isDarkMode(routeName) ? "" : "#F2F9F7",
          opacity: "0.3",
          // color: "#F2F9F7",
        },
        type: "pie",
        silent: true, // 取消高亮
        radius: ["0%", "62%"],
        center: ["50%", "56%"],
        data: reportData.value,
        label: {
          show: false,
          position: "inner",
          formatter: (params: any) => {
            return "{percent|" + params.percent.toFixed(0) + "%}";
          },
          rich: rich,
        },
        z: -1,
      },
    ],
  };
}

const option1 = ref();
function setOptions1() {
  const rawData = reportDataOther.value;
  // 对数据进行降序排序
  rawData.sort((a, b) => b.electricQuantity - a.value);

  rawData?.map((e: any, index) => {
    xAxis.value = [...xAxis.value, e.name];
    yAxis.value = [...yAxis.value, e.value];
  });

  option1.value = {
    // 全局文字样式（影响标题、图例、标签等）
    textStyle: {
      color: isDarkMode(routeName) ? "#fff" : "#767676", // 统一字体颜色
    },
    color: colorList,
    darkMode: true,
    layout: "none",
    animation: true, //控制动画示否开启
    animationDuration: 3000,
    animationEasing: "bounceOut", //缓动动画
    animationThreshold: 8, //动画元素的阈值
    backgroundColor: "transparent", // 给echarts图设置背景色
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,.5)",
      textStyle: {
        color: "#fff",
        fontFamily: "DINLight",
        fontSize: 14,
      },
    },
    grid: {
      left: "0%", //图表距边框的距离
      right: "0%",
      top: "8%",
      bottom: "4%",
      containLabel: true,
    },
    title: [
      {
        show: true,
        text: title_r.value,
        left: "center",
        top: "7%",
        // textAlign: "center",
        textStyle: {
          fontSize: titleSize,
          color: isDarkMode(routeName) ? "rgb(255,255,255)" : "#333",
        },
      },
    ],
    series: [
      {
        itemStyle: {
          color: function (params) {
            return colorList[params?.dataIndex];
          },
        },
        type: "pie",
        radius: ["0%", "56%"],
        center: ["50%", "56%"],
        label: {
          show: true,
          //   position: "inside",
          //   formatter: "{name|{b}}，{d}%",
          formatter: "{b}: {c}\n{d}%",
          color: isDarkMode(routeName) ? "#eeeeee" : "#666",
          fontSize: 13,
          lineHeight: 20,
          rich: rich,
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 10,
          lineStyle: {
            width: 1,
          },
        },
        data: reportDataOther.value,
      },
      {
        itemStyle: {
          color: isDarkMode(routeName) ? "" : "#F2F9F7",
          opacity: "0.3",
          // color: "#F2F9F7",
        },
        type: "pie",
        silent: true, // 取消高亮
        radius: ["0%", "62%"],
        center: ["50%", "56%"],
        data: reportDataOther.value,
        label: {
          show: false,
          position: "inner",
          formatter: (params: any) => {
            return "{percent|" + params.percent.toFixed(0) + "%}";
          },
          rich: rich,
        },
        z: -1,
      },
    ],
  };
}

const loading = ref(false);

// 定时刷新
let timer: any = ref(null);

// 大屏切换处理方法
function handleScreenData() {
  clearInterval(timer.value);
  timer.value = null;

  timer.value = setInterval(() => {
    handleSearch();
    handleSearch1();
    // 重复调用组件的重新获取方法
  }, second.value);
}

onMounted(() => {
  handleSearch();
  handleSearch1();
  handleScreenData();
});
onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
});
</script>

<style lang="scss" scoped></style>
